<template>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" v-bind:id="'heading-' + index">
      <h4 class="panel-title">
        <div class="row" style="margin: 0;text-align: center">
          <div class="col-xs-6">
            <a  data-toggle="collapse" data-parent="#accordion" v-bind:href="'#collapse-' + index"
               aria-expanded="true" v-bind:aria-controls="'collapse-' + index"
                v-on:click="getArticleContent()">  {{article.title}}
              <span class="badge">{{ article.replyNum }}</span>
              <small>{{article.updatedAt}}</small>
            </a>
          </div>
          <div class="col-xs-6">
            <small>回复：</small>
            <input type="text" name="reply" style="width: 160px;">
            <div class="btn-group" role="group" aria-label="...">
              <button class="btn btn-danger btn-xs">删除</button>
              <button class="btn btn-success btn-xs">加精</button>
              <button class="btn btn-info btn-xs">置顶</button>
              <button class="btn btn-primary btn-xs">回复</button>
            </div>
          </div>
        </div>
      </h4>
    </div>
    <div v-bind:id="'collapse-' + index" class="panel-collapse collapse" role="tabpanel"
         v-bind:aria-labelledby="'heading-' + index">
      <div class="panel-body">
        {{ articleContent }}
      </div>
      <ul class="list-group">
        <li v-for="reply in replies" class="list-group-item">
          <small>{{reply.createdAt}}</small> {{reply.content}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: [
      'article',
      'index',
    ],
    data() {
      return {
        articleContent: '',
        replies: [],
      }
    },
    watch: {
      articleContent: function (val, oldVal) {
        console.log('articleContent: new and old', val, oldVal);
      },
      replies: function (val, oldVal) {
        console.log('replies: new and old', val, oldVal);
      }
    },
    methods: {
      getArticleContent() {
        let thisThis  = this;
        let topicId = "http://123.206.80.54:7000/forum/" + this.article.id;
        $.get(topicId, function(res,status){
          console.log("status", status);
          console.log("res.res", res.res);
          let resRes = res.res;
          thisThis.articleContent = resRes.content;
          console.log("articleContent: " + thisThis.articleContent);
          thisThis.replies = [].concat(resRes.replies);
          console.log("this.replies", thisThis.replies);
        });
      }
    }
  }
</script>
